<script setup lang="ts">
import Password from '@/components/Password.vue'
import $mitt from '@/common/emitter'
import { useCommonStore } from '@/store/main'
import { Utils } from '@/common/utils.js'

const $router = useRouter()
const $store = useCommonStore()
const isFirstLogin: boolean = false
interface DialogConfig {
	title: string
	width?: string | number
	[property: string]: any
}
interface MainParamsType {
	dialogStatus: boolean
	dialogConfig: DialogConfig
}
const dialogData: MainParamsType = reactive({
	dialogStatus: false,
	dialogConfig: {
		title: '修改密码',
		width: 0
	}
})
// 左侧菜单最小化标志
const menuMinFlag = ref(false)
const menuTitle = computed(() => menuMinFlag.value ? '展开菜单' : '缩小菜单')
const changeMenuSizeFn = () => {
	menuMinFlag.value = !menuMinFlag.value
	$mitt.emit('MENU_MIN_FLAG', menuMinFlag.value)
}

// 修改密码
const setPasswordFn = () => dialogData.dialogStatus = true
// 关闭密码弹窗
const handlerCloseFn = () => dialogData.dialogStatus = false

const signOutFn = () => {
	$store.setToken('')
	$store.userStatus && $store.setUserStatus(false)
	$store.setUserInfo({
		userName: '',
		userType: -1,
		ttl: 0,
		beginTime: 0
	});
	Utils.loginCountdown(0, 0)
	$router.replace({
		path: '/login'
	});
}
</script>

<template>
    <div class="header">
		<div class="header-left pointer">
			<el-icon class="mr-20" @click="changeMenuSizeFn" :title="menuTitle">
				<Expand v-if="menuMinFlag" />
				<Fold v-else />
			</el-icon>
		</div>
		<div class="header-right">
            <div class="user-info">
				<span class="mr-30" :title="`用户名：${$store.userInfo.userName}`">
					<el-icon><Avatar /></el-icon>{{ $store.userInfo.userName }}
				</span>
				<span class="pointer mr-30" @click="setPasswordFn" title="修改密码">
					<el-icon><Setting /></el-icon>修改密码
				</span>
				<span class="pointer mr-30" @click="signOutFn" title="登出">
					<el-icon><SwitchButton /></el-icon>登出
				</span>
            </div>
		</div>
    </div>

	<!-- 修改密码 -->
	<el-Dialog 
		v-model="dialogData.dialogStatus" 
		:title="dialogData.dialogConfig.title" 
		:width="dialogData.dialogConfig.width ? dialogData.dialogConfig.width : 800" 
		:before-close="handlerCloseFn" 
		:close-on-click-modal="false" 
		destroy-on-close 
		draggable
	>
		<Password class="set-pwd" :isFirstLogin="isFirstLogin" :isShowReset="true" />
	</el-Dialog>
</template>

<style lang="scss" scoped>
%flex-base-set {
	display: -webkit-flex;
	display: flex;
}
%flex-column {
	flex-direction: column;
}
%flex-column-set {
	@extend %flex-base-set;
	@extend %flex-column;
}
.header {
	@extend %flex-base-set;
	justify-content: space-between;
	align-items: center;
	padding-left:.15rem;
	padding-right:.15rem;
	width: 100%;
	height: .5rem;
	line-height:.5rem;
	color: $color-night;
	background-color: $color-f8;
	border-bottom: .01rem solid $color-eee;

	& .header-left, & .header-right {
		@extend %flex-base-set;
		align-items: center;
	}
	.el-icon {
		font-size: .18rem;
	}
}

.set-pwd {
	margin: .15rem 0 .5rem;
	padding-right: .8rem;
}
</style>